<template>
    <div>
        <el-upload
            action="http://localhost:5000/shop/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="successDeal"
            :file-list="fileList">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
let baseUrl = "http://localhost:5000/upload/shop/";
export default {
  model: {
    prop: "imgUrl",
    event: "Upload"
  },
  props: {
    imgUrl: Array
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      picList: []
    };
  },
  computed: {
    fileList() {
      return this.imgUrl.map(item => {
        return {
          url: baseUrl + item
        };
      });
    }
  },
  methods: {
    handlePictureCardPreview(file) {
        console.log(file);
        
      this.dialogVisible = true;
      this.dialogImageUrl = file.url
    },
    handleRemove() {},
    successDeal(response, file, fileList) {
      console.log(response, file, fileList);
      this.picList = fileList.map(item => {
        return response.imgUrl;
      });
      this.$emit("imgUrl", this.picList);
    }
  }
};
</script>

<style scoped>
</style>